<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../libs/leaflet/leaflet.ChineseTmsProviders.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="map"></div>
		<div>
			<div><span>最大放大倍数:</span><input type="text" id="maxZoom" placeholder="默认 18" /></div>
			<div><span>最小放大倍数:</span><input type="text" id="minZoom" placeholder="默认 1" /></div>
			<button type="button" onclick="setZoomLevels()">设置地图显示级别范围</button>
		</div>
		<script type="text/javascript" id="my_script">
			var map = L.map('map', {
        center: [39.916322, 116.390943],
        zoom: 14,
				maxZoom: 18,
				minZoom: 10,
        crs: L.CRS.EPSG4326 // leaflet默认是3857坐标系
      });
			L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=89cd1623dd7336f91f85222d2022edae', {
				maxZoom: 18,
				minZoom: 10,
				zoomOffset: 1,
				baseLayer: true
			}).addTo(map)
			L.tileLayer('http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=89cd1623dd7336f91f85222d2022edae', {
				maxZoom: 18,
				minZoom: 10,
				zoomOffset: 1,
				baseLayer: true
			}).addTo(map)
			// 设置地图显示级别范围
			function setZoomLevels(){
				let maxZoom = document.getElementById("maxZoom").value || 18;
				let minZoom = document.getElementById("minZoom").value || 1;
				map.setMaxZoom(maxZoom);
				map.setMinZoom(minZoom);
			}
		</script>
	</body>
</html>
